<template>
    <div :ref="$options.name" class="chartInstance" />
</template>
<script>
    /**
     * 
     *  圆柱立体 风格柱状图
     * 
     *  数据格式参考  ./bar-mock-data.js 中提供的格式
     * 
     *  该charts 只支持单个数据哦
     * 
     */
    import chartmixins from '../../util/echartmixins'
    import { rankingData } from '../../util/bar-mock-data'
    import { colorOptions } from '../../util/common.js'
    import * as echarts from 'echarts'

    export default {
        name: 'Bar-ver-cylinder',
        components: {},
        mixins: [chartmixins],
        props: {
            chartData: {
                type: Array,
                default: () => []
            },

            labelKey: {
                type: [Array, String],
                default: ''
            },

            valueKey: {
                type: [Array, String],
                default: ''
            },

            model: {
                type: String,
                default: 'nromal'
            },

            chartStyle: {
                type: Object,
                default: () => {
                    return {
                        'labelColor': 'rgba(255,255,255,0.6)',
                        'circleColor': ['#3ACDC5', '#02c3f1']
                    }
                }
            }
        },
        data() {
            return {
                defaultOptions: {
                    grid: {
                        left: '5%',
                        right: '4%',
                        bottom: '7%',
                        containLabel: true
                    },
                    xAxis: {
                        data: [],
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: this.formatFontSize(25),
                            align: "center",
                            textStyle: {
                                fontSize: this.formatFontSize(14),
                                color: this.chartStyle.labelColor
                            },
                        },
                        
                        interval: 0
                    },
                    yAxis: {
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            name: "柱顶部",
                            type: "pictorialBar",
                            symbolSize: [this.formatFontSize(26), this.formatFontSize(10)],
                            symbolOffset: [0, this.formatFontSize(-5)],
                            z: 12,
                            itemStyle: {
                                normal: {
                                    color: (params) => {
                                        return colorOptions[this.model][params.dataIndex];
                                    },
                                },
                            },
                            label: {
                                show: true,
                                position: "top",
                                fontSize: this.formatFontSize(16),
                                color: this.chartStyle.labelColor
                            },
                            symbolPosition: "end",
                            data: [],
                        },
                        {
                            name: "柱底部",
                            type: "pictorialBar",
                            symbolSize: [this.formatFontSize(26), this.formatFontSize(10)],
                            symbolOffset: [0, this.formatFontSize(5)],
                            z: 12,
                            itemStyle: {
                                normal: {
                                color: (params) => {
                                    return colorOptions[this.model][params.dataIndex];
                                },
                                },
                            },
                            data: [],
                        },
                        {
                            name: "第一圈",
                            type: "pictorialBar",
                            symbolSize: [this.formatFontSize(47), this.formatFontSize(16)],
                            symbolOffset: [0, this.formatFontSize(11)],
                            z: 11,
                            itemStyle: {
                                normal: {
                                    color: "transparent",
                                    borderColor: this.chartStyle.circleColor[0],
                                    borderWidth: this.formatFontSize(2),
                                },
                            },
                            data: [],
                        },
                        {
                            name: "第二圈",
                            type: "pictorialBar",
                            symbolSize: [this.formatFontSize(62), this.formatFontSize(22)],
                            symbolOffset: [0, this.formatFontSize(17)],
                            z: 10,
                            itemStyle: {
                                normal: {
                                    color: "transparent",
                                    borderColor: this.chartStyle.circleColor[1],
                                    borderWidth: this.formatFontSize(2),
                                },
                            },
                            data: [],
                        },
                        {
                            type: "bar",
                            itemStyle: {
                                normal: {
                                    color: (params) => {
                                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 1,
                                                color: this.change16IntoRgba(colorOptions[this.model][params.dataIndex], 1),
                                            },
                                            {
                                                offset: 0,
                                                color: this.change16IntoRgba(colorOptions[this.model][params.dataIndex], 0.1),
                                            },
                                        ]);
                                    },
                                    opacity: 0.8,
                                },
                            },
                            z: 16,
                            silent: true,
                            barWidth: this.formatFontSize(26),
                            barGap: "-100%", 
                            data: [],
                        },
                    ]
                }
            }
        },
        watch: {
            chartData(newVal) {
                this.refreshApiData(newVal)
            },

            chartStyleOptions(newVal) {
                this.handleRefreshStyle(newVal)
            }
        },
        computed: {
            formatOptions() {
                return Object.assign({
                    'labelColor': 'rgba(255,255,255,0.6)',
                    'circleColor': ['#3ACDC5', '#02c3f1']
                }, this.chartStyle)
            },

            chartStyleOptions() {
                const {
                    labelColor,
                    circleColor
                } = this.formatOptions
                return {
                    xAxis: {
                        axisLabel: {
                            textStyle: {
                                color: labelColor
                            }
                        }
                    },
                    series: [
                        {
                            label: {
                                color: labelColor
                            }
                        },
                        {},
                        {
                            itemStyle: {
                                normal: {
                                    borderColor: circleColor[0],
                                },
                            }
                        },
                        {
                            itemStyle: {
                                normal: {
                                    borderColor: circleColor[1],
                                },
                            }
                        },
                        {}
                    ]
                }
            }
        },
        methods: {
            refreshMockData() {
                this.refreshApiData(rankingData)
            },

            refreshApiData({
                chartData,
                valueKey,
                labelKey
            } = this) {
                // 这里有数据代表不是直接传递，需要手动取值
                if (chartData?.length) {
                    if (Array.isArray(this.labelKey) || Array.isArray(this.valueKey)) {
                        this.errorMsg = '数据格式传递错误'
                        return
                    }
                    let chartLabelList = chartData.map(item => item[labelKey])
                    let seriesList = chartData.map(item => item[valueKey])

                    this.defaultOptions.xAxis.data = chartLabelList

                    this.defaultOptions.series.forEach(item => {
                        item.data = seriesList
                    })
                } else {
                    if (Array.isArray(labelKey) && Array.isArray(valueKey)) {
                        this.defaultOptions.xAxis.data = [...labelKey]
                        let seriesList = [...valueKey]
                        this.defaultOptions.series.forEach(item => {
                            item.data = seriesList
                        })
                    } else {
                        this.errorMsg = '数据格式传递错误'
                    }
                }
                this.setOption(this.defaultOptions)
            },

            handleRefreshStyle(options) {
                if (!options || !Object.prototype.toString.call(options) == '[object Object]') return
                this.setOption(options)
            }
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            this.refreshMockData()
            this.handleRefreshStyle(this.chartStyleOptions)
            // this.refreshApiData()
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped horizontalvw>
    .chartInstance {
        width: 100%;
        height: 100%;
    }
</style>